<template>
  <div class="orders">
    <div class="filter">
      <span class="all-order" v-if="date">
        {{date}}<span class="clear-date" @click="clearDate"></span>
      </span>
      <span class="all-order" v-else>全部订单</span>
      <span @click = 'openPicker'>筛选</span>
    </div>
    <div class="order-list"
    v-infinite-scroll="loadMore"
    infinite-scroll-immediate-check="false"
    infinite-scroll-distance="10">
        <div class="order" v-for="item in orderListArr">
          <div class="info">
            <div class="order-image">
              <img class="image" :src="item.picUrl" />
            </div>
            <div class="order-info">
              <div class="order-title">{{item.tbItemTitle}}</div>
              <div class="order-price">
                <div>
                  <span class="text">订单金额：¥</span>
                  <span class="text price">{{item.price}}</span>
                </div>
                <div>
                  <span class="text">预估收益：<span class="pink">¥</span></span><span class="text price pink">{{item.earn}}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="time-info">
            <span class="time">{{item.orderTime}}</span>
            <span class="status">{{item.statusText}}</span>
          </div>
        </div>

        <div class="no-more">
            {{isData ? '暂无订单明细' : isBottom ? '到底啦~' : '正在加载...'}}
        </div>
    </div>
    <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm"></mt-datetime-picker>
  </div>
</template>

<script>
import { axiosGet, axiosPost } from '@/assets/js/api'
import { Toast } from 'mint-ui';
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['mpOpenId'])
  },
  data () {
    return {
      pickerValue: this.formatDate(new Date(), 'yyyy-MM-dd'),
      orderListArr: [],
      startDate: "",
      endDate: "",
      offset: 0,
      isData: false,
      isBottom: false,
      loading: false,
      date: '',
      isFetching: false
    }
  },
  watch: {
    "mpOpenId": function () {
      this.getOrderList();
    }
  },
  mounted () {
    this.getOrderList()
  },
  methods: {
    getOrderList () {
      if (!this.mpOpenId) return;
      let _this = this;
      const param = {
        "mpOpenId": this.mpOpenId,
        "startDate": this.startDate,
        "endDate": this.endDate,
        "offset": this.offset,
        "pageSize": 10
      }
      if(!_this.isFetching) {
        axiosGet('/api/public/1.0/h5/weixin/orderInfoList', {
            data: param
        })
          .then((response) => {
            console.log(response);
            if(response.success){
              let items = response.data;
              items = items.map((value) => { // 格式化毫秒数据
                  value.orderTime = _this.formatDate(new Date(value.orderTime), 'yyyy-MM-dd');
                  return value
                });
              _this.orderListArr = [...this.orderListArr, ...items]
              _this.offset += items.length;
              if (!_this.orderListArr.length) {
                _this.isBottom = false;
                _this.isData = true
                return
              }
              if (!items.length || items.length< 10) {
                _this.isBottom = true
                _this.isData = false
                _this.isFetching = true
                return
              }
            } else {
              Toast({
                message: response.msg || '系统错误，请重试',
                duration: 3000
              })
            }
          }, (error) => {
            Toast({
              message: error.msg || '系统错误，请重试',
              duration: 3000
            })
          })
      }

    },
    openPicker() {
      this.$refs.picker.open();
    },
    handleConfirm () {
      let date = this.formatDate(new Date(this.pickerValue), 'yyyy-MM-dd');
      this.date = date;
      this.offset = 0;
      this.isData= false;
      this.isBottom= false;
      this.loading= false;
      this.startDate = date;
      this.endDate = date;
      this.isFetching = false;
      this.orderListArr = [];
      this.getOrderList();
    },
    loadMore() {
      let _this = this;
      this.loading = false;
      this.getOrderList()
    },
    clearDate () {
      this.date = '';
      this.startDate = "";
      this.endDate = "";
      this.offset = 0;
      this.isData= false;
      this.isBottom= false;
      this.loading= false;
      this.isFetching = false;
      this.orderListArr = [];
      this.getOrderList()
    },
    formatDate (date, fmt) {
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    }

  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
  .orders {
    background: #F5F5F5;
    .filter {
      padding: 0.2rem;
      display: flex;
      justify-content: space-between;
    }
    .all-order {
      font-size: 0.26rem;
      color: #444;
      .clear-date {
        display: inline-block;
        width: 0.27rem;
        height: 0.27rem;
        overflow: hidden;
        position: relative;
        color: #fff;
        border-radius: 50%;
        background-color: #bbb;
        top: 0.04rem;
        left: 0.2rem;
        &::before,
        &::after {
          position: absolute;
          content: '';
          top: 50%;
          left: 10%;
          background-color: #fff;
          width: 80%;
          height: 1px;
        }
        &::before {
          transform: rotate(45deg);
        }
        &::after {
          transform: rotate(-45deg);
        }
      }
    }
    .picker {
      display: block;
      .date {
        font-size: 0.26rem;
        color: #999;
        .image {
          width: 0.26rem;
          height: 0.26rem;
          margin-right: 0.2rem;
          position: relative;
          top: 0.03rem;
        }
      }
    }

    .order {
      background-color: #fff;
      padding: 0 0.2rem;
      margin-bottom: 0.1rem;
      &.failure{
        .pink{
          color: #999!important;
        }
        .status {
          color: #999!important;
        }
      }
      .info{
        padding: 0.2rem 0;
        .order-image {
          display: inline-block;
          background-image: url('http://h5cow.oss-cn-hangzhou.aliyuncs.com/zdclock/static/media/loading.jpg');
          background-size: cover;
          width: 1.4rem;
          height: 1.4rem;
          .image{
            width: 100%;
            height: 100%;
          }
        }
        .order-info{
          display: inline-block;
          vertical-align: top;
          padding: 0 0.2rem;
          width: 5.3rem;
          .order-title {
            font-size: 0.26rem;
            color: #666;
            margin: 0.2rem 0;
            padding: 0.05rem 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .order-price{
            display: flex;
            justify-content: space-between;
            .text{
              font-size: 0.28rem;
              color: #444;
            }
            .price{
              font-size: 0.3rem;
            }
            .pink{
              color: pink;
            }
          }
        }
      }
      .time-info {
        padding: 0.2rem 0;
        border-top: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        .time{
          font-size: 0.26rem;
          color: #aaa;
        }
        .status{
          font-size: 0.28rem;
          color: #333;
        }
      }

    }
  }
  .no-more{
      display: block;
      width: 100%;
      color: #666;
      font-size: 0.3rem;
      text-align: center;
      padding: 0.2rem 0;
    }
</style>
